import { useState } from 'react';
import classnames from 'classnames';
import styles from './index.module.less';
import { HomeOutlined, SettingOutlined } from '@ant-design/icons';
import { NavLink } from 'react-router-dom';
import enUS from 'antd/lib/locale/en_US';
import zhCN from 'antd/lib/locale/zh_CN';
import { useTranslation } from 'react-i18next';

const Nav: React.FC<any> = ({ setState }) => {
  const [showBol, setShowBol] = useState(false);
  const { t, i18n } = useTranslation();
  const muns = [
    {
      name: 'nav.article',
      path: '/',
    },
    {
      name: 'nav.gallery',
      path: '/gallery',
    },
    {
      name: 'nav.experiment',
      path: '/login',
    },
  ];
  (window as any).onmousewheel = (event: WheelEvent): void => {
    event = event || window.event;
    if (event.deltaY > 0) {
      setShowBol(true);
    } else {
      setShowBol(false);
    }
  };
  const clickFun = (val: string) => {
    if (val == 'zhCN') {
      i18n.changeLanguage('zh');
      setState(zhCN);
    } else {
      i18n.changeLanguage('en');
      setState(enUS);
    }
  };
  return (
    <>
      <nav
        className={classnames(styles.nav_box, showBol ? styles.hiddenNav : '')}
      >
        <div className={classnames(styles.nav_box_left)}>
          <NavLink
            to="/"
            className={classnames(styles.nav_box_home, styles.nav_hover)}
          >
            <HomeOutlined />
          </NavLink>
        </div>
        <div className={classnames(styles.nav_box_center)}>
          {muns.map((item, index) => (
            <NavLink
              className={classnames(styles.nav_center_item, styles.nav_hover)}
              to={item.path}
              key={index + 'li'}
            >
              {t(`${item.name}`)}
            </NavLink>
          ))}
        </div>
        <div className={classnames(styles.nav_box_right)}>
          <div className={classnames(styles.nav_box_change)}>
            <NavLink
              to="/"
              className={classnames(styles.nav_box_set, styles.nav_hover)}
            >
              <SettingOutlined />
            </NavLink>
            <button
              className={classnames(styles.nav_box_btn, styles.nav_hover)}
              onClick={() => {
                clickFun('zhCN');
              }}
            >
              中文
            </button>
            <button
              className={classnames(styles.nav_box_btn, styles.nav_hover)}
              onClick={() => {
                clickFun('enUS');
              }}
            >
              English
            </button>
          </div>
        </div>
      </nav>
    </>
  );
};

export default Nav;
